<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>绑定手机号</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        html,
        body {
            background: #fff;
        }

        .disable_btn {
            background: #8E8E8E !important;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <header>
            <div class="flex-x-sb">
                <span class="iconfont goback" @click="back">&#xe66f;</span>
                <div class="title">
                    绑定手机号
                </div>
            </div>
        </header>
        <div class="pt">
            <div class="lineGrey"></div>
            <div class="xgsj" v-if="changeStatus == 2">
                <div class="xgsj-item flex-x-sb">
                    <input type="tel" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号"
                        v-model="checkParam.phone">
                </div>
                <div class="xgsj-item flex-x-sb">
                    <input type="text" maxlength="4" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入验证码"
                        v-model="checkParam.code">
                    <div class="code" @click="getCode()" v-show="codeStatus == 1">获取验证码</div>
                    <div class="code" v-show="codeStatus == 2">{{count}}s后重新获取</div>
                    <div class="code" @click="getCode()" v-show="codeStatus == 3">重新获取</div>
                </div>
                <div class="xgsj-btn flex-x-c">
                    <div @click="submit" :class="{'disable_btn': !send_pass}">提交</div>
                </div>
            </div>
            <div class="xgsj-suc" v-if="changeStatus == 3">
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/home/new1.jpeg" alt="">
                <div>手机号修改成功</div>
                <div class="xgsj-btn flex-x-c" style="margin-top:.4rem">
                    <div @click="back">完成</div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script>
        apiready = function () {
            vm = new Vue({
                el: '.app',
                data: {
                    changeStatus: 2, //1原手机 2现手机 3完成
                    checkParam: {
                        phone: '',
                        code: '',
                        type: api.pageParam.type,
                        bindCode: api.pageParam.bindCode
                    },
                    codeStatus: 1, //1是获取验证码 2 倒计时 3是重新
                    count: 59,
                    codeTimer: null,
                    send_pass: false
                },
                mounted: function () {
                    this.checkParam.phone = ''
                    this.checkParam.code = ''
                },
                methods: {
                    getCode() {
                        let vm = this
                        if (!vm.checkParam.phone) {
                            toastMiddle("请输入手机号码！");
                            return false;
                        }
                        if (!(/^1[3456789]\d{9}$/.test(vm.checkParam.phone))) {
                            toastMiddle('请输入正确的手机号')
                            return false;
                        }
                        vm.codeStatus = 2
                        vm.codeTimer = setInterval(() => {
                            vm.count--
                            if (vm.count === 0) {
                                clearInterval(this.codeTimer)
                                vm.codeStatus = 3
                                vm.count = 59
                            }
                        }, 1000)
                        common("smsSendCode")("BIND_PHONE", vm.checkParam.phone, vm.checkParam.type, (ret, err) => {
                            if (ret && ret.code === RESPONSE_OK) {
                                vm.send_pass = true
                                toastMiddle("发送成功!");
                            } else {
                                vm.codeStatus = 1
                                clearInterval(vm.codeTimer)
                                vm.count = 59
                            }
                        })
                    },
                    submit() {
                        let vm = this
                        console.log(JSON.stringify(vm.checkParam))
                        if (!vm.checkParam.type || !vm.checkParam.bindCode) {
                            toastMiddle('参数错误')
                            return false;
                        }
                        if (!(/^1[3456789]\d{9}$/.test(vm.checkParam.phone))) {
                            toastMiddle('请输入正确的手机号')
                            return false;
                        }
                        if (!vm.checkParam.code) {
                            toastMiddle('请输入验证码')
                            return false;
                        }
                        const param = {
                            bindType: vm.checkParam.type,
                            bindCode: vm.checkParam.bindCode,
                            phone: vm.checkParam.phone,
                            code: vm.checkParam.code
                        }
                        common("bindPhone")(param, function (ret) {
                            toastMiddle("绑定成功,正在跳转首页！")
                            setTimeout(() => {
                                console.log(JSON.stringify(ret))
                                $api.setStorage('accessToken', ret.data)
                                api.setPrefs({
                                    key: 'accessToken',
                                    value: ret.data
                                });
                                api.sendEvent({
                                    name: 'login',
                                    extra: { key: ' value' }
                                });
                                api.closeToWin({
                                    name: 'root'
                                })
                            }, 500)
                        })
                    },
                    back() {
                        api.closeWin();
                    }
                },
            })
        }
    </script>
</body>

</html>